<template>
  <!-- 放置一个图标 -->
  <div class="screenWrapper">
    <svg-icon
      :icon-class="isFullScreen ? 'exit-fullscreen' : 'fullscreen'"
      class="fullscreen"
      @click="toggleScreen"
    />
  </div>
</template>

<script>
/**
 全屏切换
 1. 找到可以进行全屏切换的底层API [由浏览器内置提供]
 2. 交互形式: 如果当前是非全屏状态 点击就变成全屏 如果已经是全屏状态 点击变成退出全屏

 icon图的切换
 思路: 根据当前的是否全屏的状态切换svg-icon组件中icon-class的值

 esc退出bug
 表现: 浏览器虽然退出了全屏 但是咱们本地维护的状态 isFullScreen没有跟着一起变 它还是开启的状态 没有变成false
 解决思路: 监听一下现在是否退出了全屏 一旦发现它不是全屏模式了 立刻把isFullScreen设置为false 和全屏状态保持一致
 技术解决：
   1. 如何监听是否退出了全屏 -> fullscreenchange  只要你切换了全屏状态 事件回调就会执行
   2. 如何得知当前浏览器的状态是退出了全屏  -> document.fullscreenElement
 */
// 导入插件
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false // true为全屏
    }
  },
  mounted() {
    // 手动监听浏览器是否为全屏做判断
    // window.addEventListener('fullscreenchange', () => {
    //   // 监听到屏幕变化，在回调中判断是否已退出全屏 如果已退出全屏 把本地状态修改为false
    //   console.log(document.fullscreenElement)
    //   const isFull = document.fullscreenElement // 退出全屏值为null
    //   if (isFull == null) {
    //     this.isFullScreen = false
    //   }
    // })

    // 插件的实现
    screenfull.on('change', () => {
      // console.log(screenfull.isFullscreen) // 结果返回布尔值
      this.isFullScreen = screenfull.isFullscreen
    })
  },
  methods: {
    toggleScreen() {
      // 手动自己写的全屏切换
      // // 全屏切换  取反操作
      // if (this.isFullScreen) {
      //   // 退出全屏
      //   document.exitFullscreen()
      // } else {
      //   // 开启全屏
      //   document.documentElement.requestFullscreen()
      // }
      // this.isFullScreen = !this.isFullScreen

      // 插件中的方法
      // 来回的取反操作  自动执行
      screenfull.toggle()
    }
  }
}
</script>

<style lang="scss" scoped>
.screenWrapper {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
